<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿基米米</title>
</head>
<style type="text/css">
#play{
	margin:auto;
	height:290px;
	width:475px;
	border:#DEDEDE 1px solid
}
#play_list{
	margin:auto;
	padding:2px;
	width:470px;
	height:250px;
	display:block;
	overflow:hidden;
}
#play_list img{
	width:470px;
	height:250px;
	border:0px;
}

#play_list a{
	width:470px;
	height:250px;
	text-align:center;
}
#small_list{
	margin:auto;
	padding:2px 0 2px 3px;
	width:172px;
	height:20px;
	border-top:1px solid #E9E9E9;
	border-bottom:1px solid #E9E9E9;
	background-color:#F4F3F4;
	filter:alpha(Opacity=80);
	opacity:0.8;
	padding-left:300px;
}
.list_img a {
	float:left;
	margin:3px 4px 0 2px;
	width:18px;
	padding:2px;
	height:18px;
	text-align:center;
	text-decoration:none;
	border:1px solid orange;

}
.list_img a:hover {
	position:relative;
	margin:3px 4px 0 2px;
	padding:2px;
	width:18px;
	height:18px;
	border:3px solid #5C5C5C;
}

</style>
<body>
<DIV id="play">
    <div id="play_list">
        <A href="#"><img src="images/01.jpg" /></A>
        <A href="#"><img src="images/02.jpg" /></A>
        <A href="#"><img src="images/03.jpg" /></A>
        <A href="#"><img src="images/04.jpg" /></A>
        <A href="#"><img src="images/05.jpg" /></A>
    </div>
    <div id="small_list">
        <div class="list_img">
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>            
        </div>
    </div>
</DIV>    
<script type="text/javascript" language="javascript" src="../js/jquery-1.3.2.js"></script>
<script type="text/javascript" language="javascript" src="../js/jquery.timers-1.1.3.js"></script>
<script type="text/javascript" language="javascript"> 
var t = n = 0, count =5;
count= $("#play_list A").size();
$("#play_list a:not(:first-child)").hide();
$(".list_img a").eq(0).css({"border":"1px solid #5C5C5C","background-color":"#94172B","color":"#FFFFFF"});
$(".list_img a").mouseover(function()
{
	var i = $(".list_img a").index(this);
	//alert(i);
	n = i;
	if (i >= count) return;
	$("#play_list a").filter(":visible").hide().parent().children().eq(i).show();
	$(this).css({"border":"1px solid #5C5C5C","background-color":"#94172B","color":"#FFFFFF"}).siblings().css({"text-align":"center","text-decoration":"none","border":"1px solid orange","background-color":"#F4F3F4","color":"#666666"});
	
});

$(document).everyTime(2000, "movie", function(){
	n = n >= (count - 1) ? 0 : ++n;
	$(".list_img a").eq(n).trigger('mouseover');
});

</script>
</body>
</html>